<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css" rel="stylesheet">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-family: "Gochi Hand", cursive;
        }
        #app{
            margin: 1rem 0 0 40vw;
            display: inline-block;
        }

        .top > .subject{
            margin-top: 1rem;
        }

        label{
            position: relative;
            font-size: 1rem;
            line-height: 1rem;
        }

        input{
            padding: 0.7rem;
            border: solid 3px transparent;
            border-bottom: dashed 3px #95a9ea;
            font-size: 1rem;
            outline: none;
        }

        input:focus{
            border: solid 3px #95a9ea;
        }

        button{
            outline: none;
            padding: 0.2rem 0.4rem;
            background-color: #95a9ea;
            border-radius: 4px;
            border: none;
            font-size: 1rem;
            color: white;
        }

        .submit{
            position: relative;
            clear: both;
        }

        .submit button{
           margin: 1rem 0;
           float: right;
        }

        .middle{
            clear: both;
        }

        .middle button{
            border-radius: 0;
            border: solid 1px #ccc;
            border-right: none;
        }

        .middle button:first-of-type{
            border-radius: 4px 0 0 4px;
            border-left: solid 1px #ccc;
        }

        .middle button:last-of-type{
            border-radius: 0 4px 4px 0;
        }

        table{
            margin-top: 0.5rem;
            border-collapse: collapse;
        }

        th{
            border-top: solid 2px #ccc;
            border-bottom: solid 2px #ccc;
            font-size: 1.2rem;
            line-height: 1.2rem;
            padding: 0.3rem 1.6rem;
            text-align: center;
        }

        td{
            border-bottom: solid 1px #ccc;
            font-size: 1rem;
            line-height: 1rem;
            padding: 0.3rem 1.6rem;
            text-align: center;
        }

        ul{
            margin-top: 1rem;
        }

        li{
            list-style: none;
            padding: 0.5rem;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- top start -->
        <div class="top rotateIn animated">
            <div class="subject">
                <label>学号:</label>
                <input type="text" v-model="score.id" placeholder="请输入学号!"/>
            </div>

            <div class="subject">
                <label>姓名:</label>
                <input type="text" v-model="score.name" placeholder="请输入姓名!"/>
            </div>

            <div class="subject">
                <label>数学:</label>
                <input type="number" v-model="score.math" placeholder="请输入分数!"/>
            </div>

            <div class="subject">
                <label>语文:</label>
                <input type="number" v-model="score.chinese" placeholder="请输入分数!"/>
            </div>

            <div class="subject">
                <label>外语:</label>
                <input type="number" v-model="score.english" placeholder="请输入分数!"/>
            </div>

            <div class="submit">
                <button @click="submit">提交</button>
            </div>
        </div>
        <!-- top end -->

        <!-- middle start -->
        <div class="middle" v-if="scores.length">
            <div class="animated fadeInDown">
                <button v-for="(value,key) of subject" :key="key" @click="() => type = key">{{value}}</button>
            </div>
            <lp-choose :scores="scores" :type="type"></lp-choose>
        </div>
        <!-- middle end -->

        <!-- bottom start -->
        <div class="bottom" v-if="scores.length">
            <lp-total :scores="total"></lp-total>
        </div>
        <!-- bottom end -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component("lp-choose", {
            props: {
                type: {
                    type: String,
                    required: true,
                },
                scores: {
                    type: Array,
                    required: true,
                }
            },
            mounted(){
                // console.log(this.scores);
            },
            template: `
                <table class="animated fadeInLeft">
                    <thead>
                        <tr>
                            <th>学号</th>    
                            <th>姓名</th>
                            <th>分数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in scores" :key="item.id" class="animated fadeInLeft">
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item[type]}}</td>    
                        </tr>
                    </tbody>  
                </table>
            `
        })

        Vue.component("lp-total", {
            props: {
                scores: Array,
                required: true
            },
            mounted(){
                console.log(this.scores);
            },
            computed: {
                max: function(){
                    return Math.max(...this.scores);
                },
                min: function(){
                    return Math.min(...this.scores);
                },
                average: function(){
                    let average = 0;
                    if(this.scores.length !== 0){
                        average = this.scores.reduce((sum, item) => (parseInt(sum) + parseInt(item))) / this.scores.length
                    }else{
                        average = 0;
                    }
                    return average.toFixed(2);
                },
                pass: function(){
                    let pass = 0;
                    this.scores.forEach(item => {
                        if(item >= 60){
                            pass++;
                        }
                    })

                    return pass;
                }
            },
            template: `
                <ul class="total fadeInUp animated">
                    <li><span>最高分数:</span>{{max}}</li>
                    <li><span>最低分数:</span>{{min}}</li>
                    <li><span>平均分数:</span>{{average}}</li>
                    <li><span>及格人数:</span>{{pass}}</li>
                </ul>
            `
        })

        new Vue({
            el: '#app',
            data(){
                return {
                    subject: {math: '数学', chinese: '语文', english: '外语'},
                    type: 'math',
                    score: {
                        id: '',
                        name: '',
                        math: '',
                        chinese: '',
                        english: '',
                    },
                    scores: [],
                    total: [],
                }
            },
            methods: {
                submit(){
                    this.scores.push(this.score);
                    this.score = {
                        id: '',
                        name: '',
                        math: '',
                        chinese: '',
                        english: '',
                    };
                    this.change();
                },
                change(){
                    let score = [];
                    this.scores.forEach(item => {
                        score.push(item[this.type]);
                    })
                    this.total = score;
                }
            },
            watch: {
                type: function(){
                    this.change();
                }
            }
        })
    </script>
</body>
</html>